import React, { Component } from "react";
import { TabBar } from "antd-mobile";
import "./index.css";

const TabBarList = [
  {
    title: "首页",
    key: "首页",
    icon: "icon-shouye",
    pathname: "/home",

    badge: "",
  },
  {
    title: "搜房",
    key: "搜房",
    icon: "icon-chazhaodingwei",
    pathname: "/home/houseList",

    badge: "",
  },
  {
    title: "咨询",
    key: "咨询",
    icon: "icon-xinwengonggao",
    pathname: "/home/news",

    badge: "",
  },
  {
    title: "我的",
    key: "我的",
    icon: "icon-wode",
    pathname: "/home/personal",

    badge: "",
  },
];

class MyTabBar extends Component {
  render() {
    const { localPathName, isHidden } = this.props;

    return (
      <div
        className="tabBarWrapper"
        style={{ display: isHidden ? "none" : "" }}
      >
        <TabBar
          unselectedTintColor="#98b4b3"
          tintColor="#043ab9"
          barTintColor="white"
          noRenderContent={true}
          tabBarPosition="bottom"
        >
          {TabBarList.map((one) => {
            const { icon } = one;

            return (
              <TabBar.Item
                title={one.title}
                key={one.key}
                icon={<span className={`iconfont ${icon}`}></span>}
                selectedIcon={<span className={`iconfont ${icon}`}></span>}
                selected={localPathName === one.pathname}
                onPress={() => {
                  this.props.pushHistory(one.pathname);
                }}
                data-seed="logId"
              ></TabBar.Item>
            );
          })}
        </TabBar>
      </div>
    );
  }
}

export default MyTabBar;
